<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:icecore="http://www.icefaces.org/icefaces/core"
      xmlns:ace="http://www.icefaces.org/icefaces/components"
      xmlns:ice="http://www.icesoft.com/icefaces/component">
    
    <h:head>
        <title>SIVE - Reservación de eventos</title>
        <ice:outputStyle href="./xmlhttp/css/rime/rime.css" />
        <ice:outputStyle href="css/style.css" />
        <ice:outputStyle href="css/bootstrap.css" rel="stylesheet" />        
        <link href="css/bootstrap-responsive.css" rel="stylesheet" ></link>
        
    <h:outputScript library="js" name="jquery.js" />
    <h:outputScript library="js" name="bootstrap.min.js" />
    <h:outputScript library="js" name="jquery.placeholder.min.js" />
        
    </h:head>
    <h:body>  
        
        <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
            <a class="brand" href="http://localhost:8080/sive_v3/index.html">SIVE - Sistema de Informaci&oacute;n Vehicular</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Marchamo <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="http://localhost:8080/sive_v3/faces/crearMarchamo.xhtml">Crear marchamo</a></li>
                  <li><a href="http://localhost:8080/sive_v3/faces/modificarMarchamo.xhtml">Modificar marchamo</a></li>
                  <li><a href="#">Reactivar marchamo</a></li>
                </ul>
              </li>
              <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Estacionamiento <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="http://localhost:8080/sive_v3/faces/reservacionEvento.xhtml">Reservaci&oacute;n de evento</a></li>
                    <li><a href="http://localhost:8080/sive_v3/faces/reservacionVisita.xhtml">Reservaci&oacute;n de visita</a></li>
                  <li><a href="http://localhost:8080/sive_v3/faces/registroDeIncidentes.xhtml">Registro de incidentes</a></li>
                  <li><a href="http://localhost:8080/sive_v3/faces/registroDeMedidaC.xhtml">Registro multas e infracciones</a></li>
                </ul>
              </li>
              <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Consultas <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="http://localhost:8080/sive_v3/faces/consultaMultiple.xhtml">Consultas m&uacute;ltiples</a></li>
                    <li><a href="http://localhost:8080/sive_v3/faces/consultaEspecifica.xhtml">Consultas espec&iacute;ficas</a></li>
                    <li><a href="http://localhost:8080/sive_v3/faces/consultaIngresoVehiculo.xhtml">Consulta de Ingreso de Vehículos</a></li>
                </ul>
              </li>
              <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Historial <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="http://localhost:8080/sive_v3/faces/estadisticasVehiculares.xhtml">Estad&iacute;sticas y reportes</a></li>
                    <li><a href="http://localhost:8080/sive_v3/faces/revisionVehiculo.xhtml">Revisi&oacute;n de veh&iacute;culo</a></li>
                </ul>
              </li>
                   <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Ayuda<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="http://localhost:8080/sive_v3/faces/ayudaPrincipal.xhtml">Ver Ayuda</a></li>
                                </ul>
                            </li>
            </ul>
              <p class="navbar-text pull-right">
              Identificado como: <a href="#" class="navbar-link">admin</a>
            </p>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>
        <img src="img/appbar.base.arrow.png" alt="ir atras" class="nav-back" onclick="history.go(-1)" />
        <h3 class="header-bg" style="text-align: center">Sistema de Información Vehicular | Reservación de eventos</h3>
        <!--Info general-->
            <h:form>
            <!--Ace tabs-->
            <ace:tabSet  clientSide="true" styleClass="panel-tabs">
                <ace:tabPane id="panelVisita" label="Información general" styleClass="no-margin-top" >
            <!--Ace tabs-->

            <ace:panel styleClass="contenedorDatos" >
                <h:panelGrid columns="1" width="100%" >
                    <p class="titulo_panel">Por favor rellene los campos del formulario de la izquierda. Los campos marcados con (*) son requeridos..<span class="titulo_panel"></span></p>

                    <ace:textEntry id="firstNameInput" value="#{textEntryBean.firstName}" label="Nombre evento" labelPosition="left" required="true" requiredIndicator="(*)" indicatorPosition="right">
                        <ace:ajax render="@this firstNameOutput firstNameMsg"/>
                    </ace:textEntry>
                    
                    <ace:textAreaEntry id="descripcion" label="Descripción del evento" labelPosition="left" required="true" />
                    <h:panelGrid  columns="1">
                    <ace:textEntry id="cantidadEspacios"  label="Cantidad de espacios" labelPosition="left" > </ace:textEntry>
                    <p> Rango de espacios</p>
                  
                    <ace:textEntry id="rangoEstacionamiento1" label="Desde" labelPosition="left" maxlength="5"> </ace:textEntry>
                    <ace:textEntry id="rangoEstacionamiento2" label="Hasta" labelPosition="left" maxlength="5"> </ace:textEntry>
                    </h:panelGrid>
                   
                   
              <!--TOOLTIPS-->
       <ace:tooltip id="tooltipNombre"
            for="firstNameInput"
            speechBubble="true"
            showEffect="slide"
            hideEffect="grow"
            showDelay="500"
            hideDelay="300"
            position="bottomLeft"
            targetPosition="topRight"
            showEffectLength="300"
            hideEffectLength="300">
            <h:panelGrid styleClass="tooltipBoxStyle"> 
                <h:graphicImage  id="img0" value="#{tooltipOverviewBean.carSet[0].path}" alt="#{tooltipOverviewBean.carSet[0].description}"/>
                <h:outputText id="desc0" value="Nombre no debe contener números"/>
            </h:panelGrid>   
        </ace:tooltip>
             <!--TOOLTIPS generales-->
                </h:panelGrid>
       
            </ace:panel>
      
        </ace:tabPane>
                
        <!--FIN INFO general-->        
                
        <!--Info Horario-->
        <ace:tabPane id="panelVisitaHorario" label="Horario">
            <!-- Panel Grid horario -->
            <h:panelGrid styleClass="centeredPanelGrid" >
            <ace:panel id="horarioInputPanel" styleClass="contenedorDatos">
                <p class="titulo_panel">Por favor rellene los campos del formulario de la izquierda. Los campos marcados con (*) son requeridos..<span class="titulo_panel"></span></p>
                <h:panelGrid id="inputGrid2" columns="1" width="100%" styleClass="textEntryInputTable">
                    <h:panelGrid id="calendarPanel" width="100%" columns="1">
                    <ace:dateTimeEntry id="fecha"
                                       value="#{dateLabel.selectedDate}"
                                       timeZone="Canada/Mountain"
                                       pattern="MMM/dd/yyyy"
                                       renderAsPopup="true"
                                       label="Fecha de reservación"
                                       labelPosition="left"/>
                    <ace:textEntry id="horasInicio" label="Hora de inicio" labelPosition="left" > </ace:textEntry>
                    <ace:textEntry id="horasSalida" label="Hora de salida" labelPosition="left" > </ace:textEntry>
                    <input id="agregarFecha" type="button" Class="botonEnviarConsulta" value="Agregar Fecha" />
                   
                    </h:panelGrid>
                    <ace:panel id ="PanelHorariodetalle" header="Horario">
                <ice:dataTable
                        value=""
                        var="item"
                        width="100%">
                      <!-- Stock number -->
                    <ice:column>
                        <f:facet name="header">
                            <ice:outputText value=""/>
                        </f:facet>
                        <ice:outputText  style="text-align: center;" value="23"/>
                    </ice:column>
                    <!-- Stock number -->
                     <ice:column>
                        <f:facet name="header">
                            <ice:outputText value="Dia"/>
                        </f:facet>
                        <ice:outputText  style="text-align: center;" value="Martes"/>
                    </ice:column>
                       <!-- Model number -->
                    <ice:column>
                        <f:facet name="header">
                            <ice:outputText value="Mes"/>
                        </f:facet>
                        <ice:outputText  style="text-align: center;" value="Octubre"/>
                    </ice:column>
                         <!-- Stock number -->
                        <ice:column>
                        <f:facet name="header">
                            <ice:outputText value="Hora de Inicio"/>
                        </f:facet>
                            <ice:outputText  style="text-align: center;" value="14:00"/>
                         </ice:column>
                           <!-- Stock number -->
                       <ice:column>
                            <f:facet name="header">
                            <ice:outputText value="Hora de Salida"/>
                        </f:facet>
                            <ice:outputText  style="text-align: center;" value="17:00"/>
                    </ice:column>
                   </ice:dataTable>
                  </ace:panel> 
    
            </h:panelGrid>
            </ace:panel>
            </h:panelGrid>     
            </ace:tabPane>        
                <!--Info Horario-->
                <ace:tabPane id="panelEventoVehiculo" label="Vehículos">   
                 <h:panelGrid styleClass="centeredPanelGrid" >
                 <h:panelGrid id="Vehiculos" width="100%" columns="2">
                    <ace:textEntry id="placaVehiculo" label="Placa vehículo" labelPosition="left"  >
                    </ace:textEntry>
                    <input id="agregarVehiculo" type="button" Class="botonEnviarConsulta" value="Agregar vehículo" />
       
                  </h:panelGrid>   
                 </h:panelGrid>   
                     
                    <ace:panel id="PanelResultados" header="Vehiculos registrados">
                <ice:dataTable
                        value="#{tableBean.carInventory}"
                        var="item"
                        width="100%">
                    
                    <!-- Stock number -->
                     <ice:column>
                        <f:facet name="header">
                            <ice:outputText value="Vehiculo"/>
                        </f:facet>
                        <ice:outputText  style="text-align: center;" value="# ID"/>
                    </ice:column>
                       <!-- Model number -->
                    <ice:column>
                        <f:facet name="header">
                            <ice:outputText value="Placa #"/>
                        </f:facet>
                        <ice:outputText  style="text-align: center;" value="#{item.placa}"/>
                    </ice:column>
                    
                 
                   
                    
                    <!-- Description  -->
                   
                    
                    <!-- Odometer reading -->
                    
                                       
                </ice:dataTable>
            </ace:panel> 
                </ace:tabPane>
                <!-- Tooltips \ -->
            </ace:tabSet>
            
            </h:form>
        
        <div class="container centered">
         
            <footer class="footer">
                <span>Desarrollado por: Grupo de trabajo SIVE- </span><script type="text/javascript">
                    document.write ('Hoy es <span id="date-time">', new Date().toLocaleString(), '</span>.')
                    if (document.getElementById) onload = function () {
                        setInterval ("document.getElementById ('date-time').firstChild.data = new Date().toLocaleString()", 50)
                    }
                </script>
            </footer>
     </div>
    
            
    </h:body>
</html>